<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-sm-12">
        <b-card>
          <div slot="header">
            <strong>添加产品</strong>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">产品分类</label>
            <div class="col-sm-8">
              <pro-cascader @lv4-change="handleCascaderChange"></pro-cascader>
            </div>
          </div>
          <product-form :pro="pro" @submit="handleSubmit" v-if="pro.goodsid" mode="add"></product-form>
        </b-card>
      </div>
    </div>
  </div>
</template>
<script>
  import ProductForm from '@/components/ProductForm'
  import ProCascader from '@/components/ProCascader'
  import { mapState } from 'vuex'
  import { addGoods } from '../../service/api'
  import { delay } from '../../utils/common-tools'
  export default {
    name: 'add-product',
    components: {
      ProductForm,
      ProCascader
    },
    data () {
      return {
        pro: {}
      }
    },
    computed: {
      ...mapState('ci', ['lv4'])
    },
    methods: {
      /* 处理提交 */
      async handleSubmit (data) {
        data.goodid = data.goodsid
        const { data: d } = await addGoods({ fd: data })
        if (+d.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        }
        await delay(500)
        this.$router.go(-1)
      },
      /* 处理联动变化 */
      handleCascaderChange (v) {
        // this.pro = v
        this.pro = (v && this.lv4[v])
      }
    }
  }
</script>
<style lang="scss" scoped>
  .form-group {
    display: flex;
  }
</style>
